<template>
    <div>
      <!--    面包屑导航区域-->
      <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item><b>题目管理</b></el-breadcrumb-item>
        <el-breadcrumb-item :to="{ path: '/AddTest' }">创建题目</el-breadcrumb-item>
        <el-breadcrumb-item><span style="color: #545c99">查询题库</span></el-breadcrumb-item>
      </el-breadcrumb>
      <el-card>
        <h1>查询题库</h1>
        <!--      搜索与添加区域-->
        <el-row>
          <el-col :span="10">
            <el-link href="#/MyTestInfo">
              查看我创建的所有题目<i class="el-icon-view el-icon--right"></i>
            </el-link>
          </el-col>
          <el-col :span="12">
            <el-input placeholder="请输入查询内容" v-model="queryInfo.searchInfo" clearable @clear="getTestList">
              <el-button slot="append" icon="el-icon-search"></el-button>
            </el-input>
          </el-col>
        </el-row>
        <el-divider content-position="right"><i class="el-icon-edit"></i></el-divider>
<!--        所有题目-->
        <el-tabs type="border-card" @tab-click="toggleSelection()">
          <el-tab-pane>
            <span slot="label"><i class="el-icon-s-opportunity"></i>全部题目</span>
            <el-row>
              <el-col :span="5">
                <el-button @click="JumpToAdd" circle size="mini" icon="el-icon-plus" class="new_btn"></el-button>
                <span style="color: slategray; font-size: 15px">  可用题目: {{this.total}} 题</span>
              </el-col>
              <el-col :span="3">
                <el-button :disabled="this.SelectAll==''" type="text" style="color: orangered" @click="toggleSelection()">取消选择</el-button>
              </el-col>
              <el-col :span="4">
                <el-button :disabled="this.SelectAll==''" type="text" @click="showDialog"><i class="el-icon-plus">批量加入题目集</i></el-button>
              </el-col>
            </el-row>
            <el-table
              v-loading="All_loading"
              element-loading-text="拼命加载中"
              element-loading-spinner="el-icon-loading"
              :data="pagetestlist" :stripe="true" ref="multipleTable" @selection-change="handleSelectionChange">
              <el-table-column type="selection"></el-table-column>
              <el-table-column type="index" label="#"></el-table-column>
              <el-table-column prop="name" label="题目名称">
                <template slot-scope="scope">
                    <el-tooltip effect="dark" content="查看题目概述">
                      <el-button type="text" @click="getTestContent(scope.row.id)">{{scope.row.name}}</el-button>
                    </el-tooltip>
                </template>
              </el-table-column>
              <el-table-column prop="type" label="题目类型" :filters="[{text:'实验题', value: 'experience'},{text:'简答题', value: 'essay'},{text:'填空题', value: 'fill'},{text:'单选题', value: 'select'},{text:'多选题', value: 'muti'},{text:'判断题', value: 'judge'}]"
                               :filter-method="filterTag"
                               filter-placement="bottom-end">
                <template slot-scope="scope">
                  <el-tag size="medium"
                          :type="scope.row.type === 'experience' || scope.row.type === 'essay' || scope.row.type === 'fill' ? 'primary' : 'success'" disable-transitions >{{scope.row.type}}</el-tag>
                </template>
              </el-table-column>
              <el-table-column prop="content" label="题目描述"></el-table-column>
            </el-table>
            <!--      分页区域-->
            <el-pagination
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page="queryInfo.pagenum"
              :page-sizes="[10, 15, 20, 30]"
              :page-size="queryInfo.pagesize"
              layout="total, sizes, prev, pager, next, jumper"
              :total="total">
            </el-pagination>
          </el-tab-pane>
          <!--          实验题-->
          <el-tab-pane>
            <span slot="label"><i class="el-icon-document"></i>实验题</span>
            <el-row>
              <el-col :span="5">
                <el-button @click="JumpToAdd" circle size="mini" icon="el-icon-plus" class="new_btn"></el-button>
                <span style="color: slategray; font-size: 15px">  可用题目: {{this.total}} 题</span>
              </el-col>
              <el-col :span="3">
                <el-button :disabled="this.SelectAll==''" type="text" style="color: orangered" @click="toggleSelection()">取消选择</el-button>
              </el-col>
              <el-col :span="4">
                <el-button :disabled="this.SelectAll==''" type="text"><i class="el-icon-plus">批量加入题目集</i></el-button>
              </el-col>
            </el-row>
            <el-table
              v-loading="All_loading"
              element-loading-text="拼命加载中"
              element-loading-spinner="el-icon-loading"
              :data="pageExplist" :stripe="true" ref="multipleTable" @selection-change="handleSelectionChange">
              <el-table-column type="selection"></el-table-column>
              <el-table-column type="index" label="#"></el-table-column>
              <el-table-column prop="name" label="题目名称">
                <template slot-scope="scope">
                  <el-tooltip effect="dark" content="查看题目概述">
                    <el-button type="text" @click="getTestContent(scope.row.id)">{{scope.row.name}}</el-button>
                  </el-tooltip>
                </template>
              </el-table-column>
              <el-table-column prop="type" label="题目类型">
                <template slot-scope="scope">
                  <el-tag size="medium"
                          type="primary" disable-transitions >{{scope.row.type}}</el-tag>
                </template>
              </el-table-column>
              <el-table-column prop="content" label="题目描述"></el-table-column>
            </el-table>
            <!--      分页区域-->
            <el-pagination
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page="queryInfo.pagenum"
              :page-sizes="[10, 15, 20, 30]"
              :page-size="queryInfo.pagesize"
              hide-on-single-page
              layout="total, sizes, prev, pager, next, jumper"
              :total="this.pageExplist.length + (this.queryInfo.pagenum-1)*this.queryInfo.pagesize">
            </el-pagination>
          </el-tab-pane>
          <!--          简答题-->
          <el-tab-pane>
            <span slot="label"><i class="el-icon-edit-outline"></i>简答题</span>
            <el-row>
              <el-col :span="5">
                <el-button @click="JumpToAdd" circle size="mini" icon="el-icon-plus" class="new_btn"></el-button>
                <span style="color: slategray; font-size: 15px">  可用题目: {{this.total}} 题</span>
              </el-col>
              <el-col :span="3">
                <el-button :disabled="this.SelectAll==''" type="text" style="color: orangered" @click="toggleSelection()">取消选择</el-button>
              </el-col>
              <el-col :span="4">
                <el-button :disabled="this.SelectAll==''" type="text"><i class="el-icon-plus">批量加入题目集</i></el-button>
              </el-col>
            </el-row>
            <el-table
              v-loading="All_loading"
              element-loading-text="拼命加载中"
              element-loading-spinner="el-icon-loading"
              :data="pageEssaylist" :stripe="true" ref="multipleTable" @selection-change="handleSelectionChange">
              <el-table-column type="selection"></el-table-column>
              <el-table-column type="index" label="#"></el-table-column>
              <el-table-column prop="name" label="题目名称">
                <template slot-scope="scope">
                  <el-tooltip effect="dark" content="查看题目概述">
                    <el-button type="text" @click="getTestContent(scope.row.id)">{{scope.row.name}}</el-button>
                  </el-tooltip>
                </template>
              </el-table-column>
              <el-table-column prop="type" label="题目类型">
                <template slot-scope="scope">
                  <el-tag size="medium"
                          type="primary" disable-transitions >{{scope.row.type}}</el-tag>
                </template>
              </el-table-column>
              <el-table-column prop="content" label="题目描述"></el-table-column>
            </el-table>
            <!--      分页区域-->
            <el-pagination
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page="queryInfo.pagenum"
              :page-sizes="[10, 15, 20, 30]"
              :page-size="queryInfo.pagesize"
              hide-on-single-page
              layout="total, sizes, prev, pager, next, jumper"
              :total="this.pageEssaylist.length + (this.queryInfo.pagenum-1)*this.queryInfo.pagesize">
            </el-pagination>
          </el-tab-pane>
          <!--          填空题-->
          <el-tab-pane>
            <span slot="label"><i class="el-icon-edit"></i>填空题</span>
            <el-row>
              <el-col :span="5">
                <el-button @click="JumpToAdd" circle size="mini" icon="el-icon-plus" class="new_btn"></el-button>
                <span style="color: slategray; font-size: 15px">  可用题目: {{this.total}} 题</span>
              </el-col>
              <el-col :span="3">
                <el-button :disabled="this.SelectAll==''" type="text" style="color: orangered" @click="toggleSelection()">取消选择</el-button>
              </el-col>
              <el-col :span="4">
                <el-button :disabled="this.SelectAll==''" type="text"><i class="el-icon-plus">批量加入题目集</i></el-button>
              </el-col>
            </el-row>
            <el-table
              v-loading="All_loading"
              element-loading-text="拼命加载中"
              element-loading-spinner="el-icon-loading"
              :data="pageFilllist" :stripe="true" ref="multipleTable" @selection-change="handleSelectionChange">
              <el-table-column type="selection"></el-table-column>
              <el-table-column type="index" label="#"></el-table-column>
              <el-table-column prop="name" label="题目名称">
                <template slot-scope="scope">
                  <el-tooltip effect="dark" content="查看题目概述">
                    <el-button type="text" @click="getTestContent(scope.row.id)">{{scope.row.name}}</el-button>
                  </el-tooltip>
                </template>
              </el-table-column>
              <el-table-column prop="type" label="题目类型">
                <template slot-scope="scope">
                  <el-tag size="medium"
                          type="primary" disable-transitions >{{scope.row.type}}</el-tag>
                </template>
              </el-table-column>
              <el-table-column prop="content" label="题目描述"></el-table-column>
            </el-table>
            <!--      分页区域-->
            <el-pagination
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page="queryInfo.pagenum"
              :page-sizes="[10, 15, 20, 30]"
              :page-size="queryInfo.pagesize"
              hide-on-single-page
              layout="total, sizes, prev, pager, next, jumper"
              :total="this.pageFilllist.length + (this.queryInfo.pagenum-1)*this.queryInfo.pagesize">
            </el-pagination>
          </el-tab-pane>
          <!--          判断题-->
          <el-tab-pane>
            <span slot="label"><i class="el-icon-finished"></i>判断题</span>
            <el-row>
              <el-col :span="5">
                <el-button @click="JumpToAdd" circle size="mini" icon="el-icon-plus" class="new_btn"></el-button>
                <span style="color: slategray; font-size: 15px">  可用题目: {{this.total}} 题</span>
              </el-col>
              <el-col :span="3">
                <el-button :disabled="this.SelectAll==''" type="text" style="color: orangered" @click="toggleSelection()">取消选择</el-button>
              </el-col>
              <el-col :span="4">
                <el-button :disabled="this.SelectAll==''" type="text"><i class="el-icon-plus">批量加入题目集</i></el-button>
              </el-col>
            </el-row>
            <el-table
              v-loading="All_loading"
              element-loading-text="拼命加载中"
              element-loading-spinner="el-icon-loading"
              :data="pageJudgelist" :stripe="true" ref="multipleTable" @selection-change="handleSelectionChange">
              <el-table-column type="selection"></el-table-column>
              <el-table-column type="index" label="#"></el-table-column>
              <el-table-column prop="name" label="题目名称">
                <template slot-scope="scope">
                  <el-tooltip effect="dark" content="查看题目概述">
                    <el-button type="text" @click="getTestContent(scope.row.id)">{{scope.row.name}}</el-button>
                  </el-tooltip>
                </template>
              </el-table-column>
              <el-table-column prop="type" label="题目类型">
                <template slot-scope="scope">
                  <el-tag size="medium"
                          type="primary" disable-transitions >{{scope.row.type}}</el-tag>
                </template>
              </el-table-column>
              <el-table-column prop="content" label="题目描述"></el-table-column>
            </el-table>
            <!--      分页区域-->
            <el-pagination
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page="queryInfo.pagenum"
              :page-sizes="[10, 15, 20, 30]"
              :page-size="queryInfo.pagesize"
              hide-on-single-page
              layout="total, sizes, prev, pager, next, jumper"
              :total="this.pageJudgelist.length + (this.queryInfo.pagenum-1)*this.queryInfo.pagesize">
            </el-pagination>
          </el-tab-pane>
          <!--          单选题-->
          <el-tab-pane>
            <span slot="label"><i class="el-icon-circle-check"></i>单选题</span>
            <el-row>
              <el-col :span="5">
                <el-button @click="JumpToAdd" circle size="mini" icon="el-icon-plus" class="new_btn"></el-button>
                <span style="color: slategray; font-size: 15px">  可用题目: {{this.total}} 题</span>
              </el-col>
              <el-col :span="3">
                <el-button :disabled="this.SelectAll==''" type="text" style="color: orangered" @click="toggleSelection()">取消选择</el-button>
              </el-col>
              <el-col :span="4">
                <el-button :disabled="this.SelectAll==''" type="text"><i class="el-icon-plus">批量加入题目集</i></el-button>
              </el-col>
            </el-row>
            <el-table
              v-loading="All_loading"
              element-loading-text="拼命加载中"
              element-loading-spinner="el-icon-loading"
              :data="pageSellist" :stripe="true" ref="multipleTable" @selection-change="handleSelectionChange">
              <el-table-column type="selection"></el-table-column>
              <el-table-column type="index" label="#"></el-table-column>
              <el-table-column prop="name" label="题目名称">
                <template slot-scope="scope">
                  <el-tooltip effect="dark" content="查看题目概述">
                    <el-button type="text" @click="getTestContent(scope.row.id)">{{scope.row.name}}</el-button>
                  </el-tooltip>
                </template>
              </el-table-column>
              <el-table-column prop="type" label="题目类型">
                <template slot-scope="scope">
                  <el-tag size="medium"
                          type="primary" disable-transitions >{{scope.row.type}}</el-tag>
                </template>
              </el-table-column>
              <el-table-column prop="content" label="题目描述"></el-table-column>
            </el-table>
            <!--      分页区域-->
            <el-pagination
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page="queryInfo.pagenum"
              :page-sizes="[10, 15, 20, 30]"
              :page-size="queryInfo.pagesize"
              hide-on-single-page
              layout="total, sizes, prev, pager, next, jumper"
              :total="this.pageSellist.length + (this.queryInfo.pagenum-1)*this.queryInfo.pagesize">
            </el-pagination>
          </el-tab-pane>
          <!--          多选题-->
          <el-tab-pane>
            <span slot="label"><i class="el-icon-document-checked"></i>多选题</span>
            <el-row>
              <el-col :span="5">
                <el-button @click="JumpToAdd" circle size="mini" icon="el-icon-plus" class="new_btn"></el-button>
                <span style="color: slategray; font-size: 15px">  可用题目: {{this.total}} 题</span>
              </el-col>
              <el-col :span="3">
                <el-button :disabled="this.SelectAll==''" type="text" style="color: orangered" @click="toggleSelection()">取消选择</el-button>
              </el-col>
              <el-col :span="4">
                <el-button :disabled="this.SelectAll==''" type="text"><i class="el-icon-plus">批量加入题目集</i></el-button>
              </el-col>
            </el-row>
            <el-table
              v-loading="All_loading"
              element-loading-text="拼命加载中"
              element-loading-spinner="el-icon-loading"
              :data="pageMutilist" :stripe="true" ref="multipleTable" @selection-change="handleSelectionChange">
              <el-table-column type="selection"></el-table-column>
              <el-table-column type="index" label="#"></el-table-column>
              <el-table-column prop="name" label="题目名称">
                <template slot-scope="scope">
                  <el-tooltip effect="dark" content="查看题目概述">
                    <el-button type="text" @click="getTestContent(scope.row.id)">{{scope.row.name}}</el-button>
                  </el-tooltip>
                </template>
              </el-table-column>
              <el-table-column prop="type" label="题目类型">
                <template slot-scope="scope" v-if="scope.row.type === 'muti'">
                  <el-tag size="medium"
                          type="primary" disable-transitions >{{scope.row.type}}</el-tag>
                </template>
              </el-table-column>
              <el-table-column prop="content" label="题目描述"></el-table-column>
            </el-table>
            <!--      分页区域-->
            <el-pagination
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page="queryInfo.pagenum"
              :page-sizes="[10, 15, 20, 30]"
              :page-size="queryInfo.pagesize"
              hide-on-single-page
              layout="total, sizes, prev, pager, next, jumper"
              :total="this.pageMutilist.length + (this.queryInfo.pagenum-1)*this.queryInfo.pagesize">
            </el-pagination>
          </el-tab-pane>
        </el-tabs>
      </el-card>
      <!--    把题目添加到题目集的对话框-->
      <el-dialog
        title="选择题目集"
        :visible.sync="AddTestToSet"
        width="50%" @close="AddTestToSetClosed" class="role-mask">
        <!--      内容主体区域-->
        <el-form :model="TestSetForm" status-icon ref="TestSetRef" >
          <el-select v-model="TestSetForm.set" filterable placeholder="请选择" style="width:95%; margin-top:5px">
            <el-option
              v-for="item in SetList"
              :key="item.setId"
              :label="item.setName"
              :value="item.setId">
            </el-option>
          </el-select>
        </el-form>
        <!--      底部区域-->
        <span slot="footer" class="dialog-footer">
          <el-row :gutter="20">
            <el-col :span="3" :offset="10">
              <el-button type="primary" class="new_btn" @click="AddSure">确 定</el-button>
            </el-col>
          </el-row>
        </span>
      </el-dialog>
<!--      题目概述-->
      <el-drawer
        :visible.sync="DrawSign"
        size="48%"
        title="题目概述">
        <div class="all">
          <div class="draw">
            <el-page-header @back="DrawSign=false" content="详情页面">
            </el-page-header>
            <h1 style="font-size: 25px">{{this.TestContent.name}} ({{this.TestContent.totalScore}}分)</h1>
            <el-divider></el-divider>
            <el-row :gutter="20" style="font-size: 15px">
              <el-col :span="3">
                <span><b>编号</b></span>
              </el-col>
              <el-col :span="6">
                <span><b>题目类型</b></span>
              </el-col>
              <el-col :span="5">
                <span><b>创建者</b></span>
              </el-col>
              <el-col :span="8">
                <span><b>更新时间</b></span>
              </el-col>
            </el-row>
            <el-divider></el-divider>
            <el-row :gutter="20" style="font-size: 14px">
              <el-col :span="3">
                <span>{{this.TestContent.id}}</span>
              </el-col>
              <el-col :span="6">
                <span>{{this.TestContent.type}}</span>
              </el-col>
              <el-col :span="5">
                <span>{{this.TestContent.author}}</span>
              </el-col>
              <el-col :span="8">
                <span>{{this.TestContent.updateTime}}</span>
              </el-col>
            </el-row>
            <el-divider></el-divider>
            <span v-if="this.TestContent.content" class="contents">{{this.TestContent.content}} ({{this.TestContent.totalScore}})</span>
            <span v-else class="contents" style="color: #545c64">暂无题目描述</span>
            <br><br>
<!--            <el-button size="small" type="primary"><a :href=this.TestContent.doc style="color:#FFF" >下载附件</a></el-button>-->
            <el-row>
              <el-col :span="3" v-if="TestContent.doc">
                <el-tooltip class="item" effect="dark" content="下载doc文件" placement="bottom">
                  <el-button size="small"  @click="DownloadDoc(TestContent.doc)"><i class="el-icon-download"></i><i class="el-icon-document"></i></el-button>
                </el-tooltip>
              </el-col>
              <el-col :span="3"  v-if="TestContent.mp4">
                <el-tooltip class="item" effect="dark" content="下载mp4文件" placement="bottom">
                  <el-button size="small"  @click="DownloadMp4(TestContent.mp4)"><i class="el-icon-download"></i><i class="el-icon-video-camera"></i></el-button>
                </el-tooltip>
              </el-col>
            </el-row>
          </div>
          <div class="foot2"></div>
          <div class="foot">
            <el-row class="anniu">
              <el-col :offset="5" :span="9">
                <el-button class="white_btn">
                  <i class="el-icon-s-promotion">查看完整详情页</i>
                </el-button>
              </el-col>
            </el-row>
          </div>
        </div>
      </el-drawer>
    </div>
</template>

<script>
// import axios from 'axios'
var fileDownload = require("js-file-download");
export default {
  name: 'FindTest',
  data () {
    return {
      queryInfo: {
        // 模糊搜索
        searchInfo: '',
        // 当前页数
        pagenum: 1,
        pagesize: 10
      },
      testlist: [],
      total: 0,
      SelectAll: [],
      Exptotal: 0,
      DrawSign: false,
      TestContent: [],
      TestSetList: [],
      multipleSelection: [],
      AddTestToSet: false,
      // 添加题目到某一题目集
      TestSetForm: {
        set: ''
      },
      // 该教师创建的所有题目集
      SetList: [],
      All_loading: true, // 所有题目集加载
    }
  },
  created () {
    this.getTestList()
  },
  methods: {
    async getTestList () {
      const { data: res } = await this.$http.get('/test/all/')
      if (res.status !== 200) {
        return this.$message.error('获取题目列表失败!')
      }
      this.testlist = res.data
      if (this.testlist.length === res.data.length){
        this.total = res.data.length
        this.All_loading = false
      }

      console.log(this.testlist)
    },
    // 监听 pagesize 改变的事件
    handleSizeChange (newSize) {
      this.queryInfo.pagesize = newSize
      this.getTestList()
    },
    // 监听页码值改变的事件
    handleCurrentChange (newPage) {
      console.log(newPage)
      this.queryInfo.pagenum = newPage
      this.getTestList()
    },
    filterTag (value, row) {
      return row.type === value
    },
    // 选择的题目
    handleSelectionChange (val) {
      this.SelectAll = val
      var arr = []
      val.forEach(function (item) {
        arr.push({ id: item.id, type: item.type })
      })
      this.TestSetList = arr
      console.log(this.TestSetList)
      console.log(this.SelectAll)
    },
    // handleClose (done) {
    //   this.$confirm('确认关闭？')
    //     .then( _ => {
    //       done()
    //     })
    //     .catch(_ => {})
    // },
    async getTestContent (testId) {
      const { data: res } = await this.$http.get('/test/find/' + testId)
      if (res.status !== 200) {
        return this.$message.error('获取题目概述失败!')
      }
      this.TestContent = res.data
      this.DrawSign = true
      var update = res.data.updateTime
      this.TestContent.updateTime = update.slice(0, 10)
      var doc = res.data.doc
      this.TestContent.doc = doc
      var video = res.data.mp4
      this.TestContent.mp4 = video
      console.log(this.TestContent.doc)
      console.log(doc)
    },
    DownloadDoc (strurl) {
      var index = strurl.lastIndexOf('/doc/')
      var url = strurl.substring(index,strurl.length)
      let name = strurl.substring(index+5,strurl.length)
      console.log(url)
      console.log(name)
        return new Promise(() => {
          this.$http.get('/file'+url,{ responseType: 'arraybuffer'}).then(res => {
            // resolve(res)
            let fileName = name
            fileDownload(res.data,fileName);
          }).catch(error => {
            this.$message.error('下载失败!该文件不见啦！')
            console.log(error)
          })
        })
    },
    async DownloadMp4 (strurl) {
      var index = strurl.lastIndexOf('/mp4/')
      var url = strurl.substring(index,strurl.length)
      let name = strurl.substring(index+5,strurl.length)
      return new Promise(() => {
        this.$http.get('/file'+url,{ responseType: 'arraybuffer'}).then(res => {
          // resolve(res)
          let fileName = name
          fileDownload(res.data,fileName);
        }).catch(error => {
          this.$message.error('下载失败!该文件不见啦！')
          console.log(error)
        })
      })
    },
    // 取消选择
    toggleSelection (rows) {
      if (rows) {
        rows.forEach(row => {
          this.$refs.multipleTable.toggleRowSelection(row)
        })
      } else {
        this.$refs.multipleTable.clearSelection()
      }
    },
    AddTestToSetClosed () {
      this.$refs.TestSetRef.resetFields()
    },
    async showDialog () {
      this.AddTestToSet = true
      const { data: res } = await this.$http.get('/set/findByTeach/' + localStorage.getItem('username'))
      if (res.status !== 200) {
        return this.$message.error('获取题目集失败!')
      }
      this.SetList = res.data
      console.log(this.SetList)
    },
    // 将选择题目添加到题目集中
    AddSure () {
      var arr = []
      arr.push({ set: this.TestSetForm.set, test: this.TestSetList })
      console.log(arr)
      this.$refs.TestSetRef.validate(async valid => {
        // console.log(valid)
        if (!valid) return
        const { data: res } = await this.$http.post('/test/addToSet/', arr[0])
        if (res.status !== 200) {
          return this.$message.error('添加题目失败!')
        }
        this.$message.success('添加题目成功！')
        this.AddTestToSet = false
      })
    },
  //  跳转到添加题目
    JumpToAdd(){
      let path = 'AddTest'
      this.$router.push(path)
    }
  },
  computed: {
    pagetestlist: function () {
      var search = this.queryInfo.searchInfo
      if (search) {
        return this.testlist.filter(function (data) {
          return Object.keys(data).some(function (key) {
            return String(data[key]).toLowerCase().indexOf(search) > -1
          })
        })
      }
      return this.testlist.slice((this.queryInfo.pagenum - 1) * this.queryInfo.pagesize, this.queryInfo.pagenum * this.queryInfo.pagesize)
    },
    pageExplist: function () {
      var search = 'experience'
      if (this.queryInfo.searchInfo) {
        search += this.queryInfo.searchInfo
      }
      if (search) {
        return this.testlist.filter(function (data) {
          return Object.keys(data).some(function (key) {
            return String(data[key]).toLowerCase().indexOf(search) > -1
          })
        })
      }
      return this.testlist.slice((this.queryInfo.pagenum - 1) * this.queryInfo.pagesize, this.queryInfo.pagenum * this.queryInfo.pagesize)
    },
    pageEssaylist: function () {
      var search = 'essay'
      if (this.queryInfo.searchInfo) {
        search += this.queryInfo.searchInfo
      }
      if (search) {
        return this.testlist.filter(function (data) {
          return Object.keys(data).some(function (key) {
            return String(data[key]).toLowerCase().indexOf(search) > -1
          })
        })
      }
      return this.testlist.slice((this.queryInfo.pagenum - 1) * this.queryInfo.pagesize, this.queryInfo.pagenum * this.queryInfo.pagesize)
    },
    pageFilllist: function () {
      var search = 'fill'
      if (this.queryInfo.searchInfo) {
        search += this.queryInfo.searchInfo
      }
      if (search) {
        return this.testlist.filter(function (data) {
          return Object.keys(data).some(function (key) {
            return String(data[key]).toLowerCase().indexOf(search) > -1
          })
        })
      }
      return this.testlist.slice((this.queryInfo.pagenum - 1) * this.queryInfo.pagesize, this.queryInfo.pagenum * this.queryInfo.pagesize)
    },
    pageJudgelist: function () {
      var search = 'judge'
      if (this.queryInfo.searchInfo) {
        search += this.queryInfo.searchInfo
      }
      if (search) {
        return this.testlist.filter(function (data) {
          return Object.keys(data).some(function (key) {
            return String(data[key]).toLowerCase().indexOf(search) > -1
          })
        })
      }
      return this.testlist.slice((this.queryInfo.pagenum - 1) * this.queryInfo.pagesize, this.queryInfo.pagenum * this.queryInfo.pagesize)
    },
    pageSellist: function () {
      var search = 'select'
      if (this.queryInfo.searchInfo) {
        search += this.queryInfo.searchInfo
      }
      if (search) {
        return this.testlist.filter(function (data) {
          return Object.keys(data).some(function (key) {
            return String(data[key]).toLowerCase().indexOf(search) > -1
          })
        })
      }
      return this.testlist.slice((this.queryInfo.pagenum - 1) * this.queryInfo.pagesize, this.queryInfo.pagenum * this.queryInfo.pagesize)
    },
    pageMutilist: function () {
      var search = 'muti'
      if (this.queryInfo.searchInfo) {
        search += this.queryInfo.searchInfo
      }
      if (search) {
        return this.testlist.filter(function (data) {
          return Object.keys(data).some(function (key) {
            return String(data[key]).toLowerCase().indexOf(search) > -1
          })
        })
      }
      return this.testlist.slice((this.queryInfo.pagenum - 1) * this.queryInfo.pagesize, this.queryInfo.pagenum * this.queryInfo.pagesize)
    }
  }
}
</script>

<style>
  .el-drawer.rtl{
    overflow: scroll
  }
  .draw {
    margin-left: 3%;
    margin-right: 2%;
  }
  .contents {
    font-size: 15px;
    color: #404040;
  }
  .foot{
    box-shadow: 0 1px 5px rgba(27, 31, 35, 0.15);
    border-top: 1px solid beige;
    height: 80px;
    width: 100%;
    position: fixed;
    bottom: 0px;
    z-index: 100;
  }
  .foot2{
    height: 80px;
    margin-bottom: 12px;
  }
  .all{
    height: 100%;
    width: 100%;
    word-break: break-all;
  }
  .anniu{
    margin-top: 20px !important;
  }
  /* 顶部下划线 */
  .role-mask .el-dialog__header{
    border-bottom: 2px solid cornflowerblue;
    padding: 20px;
  }
  .role-mask .el-dialog__title{
    font-size: 19px;
    color: #3A68C6;
  }
  .white_btn{
    color: #545c64 !important;
    letter-spacing: 2px;
  }
  .white_btn:hover,.white_btn:focus{
    background: #545c99 !important;
    color: ghostwhite !important;
    letter-spacing: 2px;
  }
  .new_btn{
    background: #545c64 !important;
    color: white !important;
    letter-spacing: 2px;
  }
  .new_btn:hover,.new_btn:focus{
    background: #545c99 !important;
    color: ghostwhite !important;
    letter-spacing: 2px;
  }

  /*定义滚动条高宽及背景 高宽分别对应横竖滚动条的尺寸*/
  ::-webkit-scrollbar
  {
    width: 0;
    height: 0;
    background-color: #F5F5F5;
  }

  /*定义滚动条轨道 内阴影+圆角*/
  ::-webkit-scrollbar-track
  {
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
    border-radius: 10px;
    background-color: #F5F5F5;
  }

  /*定义滑块 内阴影+圆角*/
  ::-webkit-scrollbar-thumb
  {
    border-radius: 10px;
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
    background-color: #555;
  }
</style>
